<template>
	<view>
		<input placeholder="请输入新的手机号码" v-model="phone" placeholder-class="placeholder" />
		<view class="sms-box">
			<input placeholder="请输入验证码" v-model="code" placeholder-class="placeholder" />
			<button :style="{color: color}" :disabled="show" size="mini" @tap="getCode" v-text="codeValue"></button>
		</view>
		<text v-if="showTag" style="color: #ff0000; font-size: 24rpx; padding: 30rpx; box-sizing: border-box;">验证码有效期5分钟</text>
		<view class="submit" @tap="submit">提交</view>
	</view>
</template>

<script>
	import api from "@/common/api.js"
	export default {
		data() {
			return {
				codeValue: "获取验证码",
				color: "#209FFC",
				phone: "",
				code: '',
				time: 60,
				show: false,
				userInfo: [],
				showTag: false
			};
		},
		methods: {
			// 验证
			submit() {
				api.look({
					call: this.phone,
					yan: this.code,
					api: 'smsyancall',
					pid: 1
				}).then(res => {
					console.log('aaaaaa', res)
					if (res.code == 200) {
						this.handleChange()
					}else {
						uni.showToast({
							icon: 'none',
							title: res.datef,
							duration: 2000
						})
					}
				}).catch(err => {
					console.log('err', err)
				})
			},
			//
			handleChange() {
				api.changeInfo({
					api: 'updatecall',
					id: this.userid,
					call: this.phone,
					yancall: 1
				}).then(res => {
					if (res && res.code == 200) {
						uni.setStorage('message', res.date)
						uni.showToast({
							icon: 'success',
							title: res.datef,
							duration: 2000,
							success: (res) => {
								setTimeout(() => {
									uni.reLaunch({
										url: '../myMessages/myMessages'
									})
								}, 2000)
							}
						})
						this.showTag = false
					} else if (res.code == 402) {
						uni.showModal({
							title: '该手机已绑定其他账号',
							content: '是否需要与原账号解绑并继续绑定当前账号？',
							confirmText: '继续绑定',
							cancelText: '取消绑定',
							success: (res) => {
								if(res.confirm) {
									api.changeInfo({
										api: 'updatecall',
										id: this.userid,
										call: this.phone,
										yancall: 2
									}).then(res => {
										if(res && res.code == 200) {
											uni.setStorageSync('message', res.date)
											uni.showToast({
												title: '绑定成功',
												icon: 'success',
												duration: 1500,
												success: (res) => {
													setTimeout(() => {
														uni.reLaunch({
															url: '../myMessages/myMessages'
														})
													}, 1500)
												}
											})
										}
									}).catch(err => {
										console.log(err)
									})
								} else {
									this.code = '',
									this.phone = ''
								}
							}
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取验证码
			getCode(e) {
				let reg = /^(0|\+?86|17951)?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/
				if (this.phone == "" || !reg.test(this.phone.replace(/\s/g,""))) {
					uni.showToast({
						title: '请输入正确的手机号',
						duration: 2000,
						icon: 'none',
					})
				} else {
					if (this.phone != uni.getStorageSync('message')[0].call) {
						api.look({
							call: this.phone,
							api: 'sms'
						}).then(res => {
							if (res.code == 200) {
								this.showTag = true
								uni.showToast({
									title: '发送成功',
									icon: 'success',
									duration: 2000
								})
								// 60秒后重新获取验证码
								var inter = setInterval(function() {
									this.codeValue = this.time + 's后重发'
									this.time = this.time - 1
									this.color = "#E2E2E2"
									this.show = true
									if (this.time < 1) {
										clearInterval(inter)
										this.codeValue = '重新发送'
										this.time = 60
										this.color = "#2878FF"
										this.show = false
									}
								}.bind(this), 1000);
							} else {
								uni.showToast({
									title: res.datef || '发送失败',
									icon: 'none',
									duration: 2000
								})
								this.showTag = false
							}
						}).catch(err => {
							console.log(err)
						})
					} else {
						uni.showToast({
							title: '输入的手机号码，与您当前使用的手机号码一样',
							icon: 'none',
							duration: 2000
						})
					}
				}
			}
		},
		onShareAppMessage(options) {
			let shareObj = {
				success: (res) => {
					if (res.errMsg == 'shareAppMessage:ok') {
						uni.showToast({
							title: '分享成功',
							icon: 'success',
							duration: 1500
						})
					}
				},
				fail: () => {
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						uni.showToast({
							title: '取消分享',
							icon: 'none',
							duration: 2000
						})
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},
				complete: () => {
					// 转发结束之后的回调（转发成不成功都会执行）
				}
			}
		},
		onLoad(options) {
			this.userid = options.id
			this.userInfo = uni.getStorageSync('message')
		}
	}
</script>

<style lang="scss">
	input {
		width: 690rpx;
		height: 100rpx;
		line-height: 100rpx;
		margin: 30rpx auto 0;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #dfdfdf;
	}

	.submit {
		width: 690rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		text-align: center;
		background: #209FFC;
		color: #fff;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: 500;
		margin: 100rpx auto 0;
	}

	.placeholder {
		font-size: 28rpx;
		color: #999;
	}

	.sms-box {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: relative;

		input {
			padding-right: 160rpx;
			box-sizing: border-box;
			overflow: hidden;
		}

		button {
			position: absolute;
			line-height: 60rpx;
			right: 20rpx;
			top: 20rpx;
			font-size: 24rpx;
		}
	}
</style>
